const gulp=require('gulp')
const htmlMin = require('gulp-htmlmin')
const cssMin = require('gulp-cssmin')
const autoPrefixer = require('gulp-autoprefixer')
const uglify = require('gulp-uglify')
const babel = require('gulp-babel')
const sass =  require('gulp-sass')(require('sass'))
// const imagemin=require('gulp-imagemin')
const clean = require('gulp-clean')
const runSequence = require('run-sequence')

const webserver = require('gulp-webserver')


const fileInclude = require('gulp-file-include')
gulp.task('html',function(){
    // 具体要做的事情

    // 找到要处理的文件位置
        return gulp.src('./src/html/**')
        .pipe(fileInclude({
            basepath: './src/components',
            prefix: '@@'
        }))
        .pipe(htmlMin({
            collapseWhitespace:true, // 去除空白行
            minifyCSS: true, // 去除内部css样式空格
            minifyJS: true,  // 去除内部js样式空格
            removeEmptyAttributes:true, // 移出空属性
            collapseBooleanAttributes:true,
            removeStyleLinkTypeAttributes:true,
            removeComments:true, // 移除注释
            removeScriptTypeAttributes:true,
        }))  // 执行压缩任务  本身没有这个功能  需要安装一个依赖   gulp-htmlmin
        // 安装依赖
        .pipe(gulp.dest('./dist/html')) //  把压缩后的文件存储到哪

})


gulp.task('css', function(){
    return gulp.src('./src/css/**')
    .pipe(autoPrefixer()) // 自动补全前缀  gulp-autoprefixer
    .pipe(cssMin())  // 安装gulp-cssmin
    .pipe(gulp.dest('./dist/css'))
})




gulp.task('js', function(){
    return gulp.src('./src/js/**')
    .pipe(babel({
        presets: ['es2015']
    })) // es6转换es5   gulp-babel  babel-core  babel-preset-es2015
    .pipe(uglify()) // 安装依赖  gulp-uglify
    .pipe(gulp.dest('./dist/js'))
})



gulp.task('sass', function(){
    return gulp.src('./src/sass/**')
    .pipe(sass()) // 转换sass 需要安装依赖   gulp-sass  css
    .pipe(autoPrefixer()) // 自动补全前缀  gulp-autoprefixer
    .pipe(cssMin())  // 压缩
    .pipe(gulp.dest('./dist/sass'))
})


// gulp.task('img', function(){
//     gulp.src('./src/img/**')
//     .pipe(imagemin()) // 压缩图片需要安装依赖  gulp-imagemin
//     .pipe(gulp.dest('./dist/img'))
// })


gulp.task('lib', function(){
    return gulp.src('./src/lib/**')
    .pipe(gulp.dest('./dist/lib'))
})

gulp.task('clean', function(){
    // 删除dist
    return gulp.src('./dist')
    .pipe(clean()) // 执行删除 安装一个gulp-clean
})
// gulp.task('default', ['html', 'css', 'js', 'sass', 'lib'])

gulp.task('default', function(){
    runSequence('clean',['html', 'css', 'js', 'sass', 'lib'],'open','watch') // 每一个参数的参数都是一个同步 数组里面的任务是一个异步
})


gulp.task('open', function(){
    return gulp.src('./dist')
    .pipe(webserver({
        host: 'localhost',
        port: 8080,
        livereload: true, // 自动更新
        open: './html/index.html'
    })) // 安装依赖     npm i gulp-webserver -D
})


gulp.task('watch', function(){
    // @todo 无法监听 语法有问题
    // watch('./src/html/*.html',function(){
    //     gulp.start('html')
    // })
    // 原生的监听源文件变化 自动打包对应变化文件
    gulp.watch('./src/html/*.html', ['html'])
    gulp.watch('./src/css/*.css', ['css'])
    gulp.watch('./src/sass/*.scss', ['sass'])
    gulp.watch('./src/js/*.js', ['js'])
    gulp.watch('./src/lib/**', ['lib'])
})